<!DOCTYPE html>
<html>
<head>
    <title>餐饮网站搜索区域</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
   <link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        /*为页面中以下元素设置字体为Microsoft YaHei*/
        body,button, input, select { font-family: Microsoft YaHei}
        /*搜索区域*/
        /*设置搜索按钮前面的搜索图标*/
        .search{
            background-image: url(images/search.jpg);
            background-size: cover;/* background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。*/
            -webkit-background-size: cover;/* 这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写*/
            min-height: 600px;
            margin-top: -20px;
        }
        /*设置搜索框外层div样式，形成白色透明背景*/
        .reservation {
            padding: 60px 60px;
            width:50%;
            background: rgba(0, 0, 0, 0.5);
            margin: 0 auto;
            margin-top:15%;
            font-weight: 500;
            color: #f2f0f1;
            font-size: 1.2em;
            outline: none;
        }
        /*设置搜索按钮的样式*/
        .btn{
            width: 50% ;
            background: #D96B66;
            color: #fff;
            padding: 5px;
            border: none;
            border-radius: 4px;
            -webkit-border-radius: 4px;
        }
        .form-control{
            color: #8e908d;
        }
        .searchbtn{
            text-align: center;
        }
        /*媒体查询：当屏幕小于768像素时搜索表单白色背景大小发生变化*/
        @media (max-width: 768px){
            .reservation {
                padding: 20px 20px;
                width: 90%;
            }
        }
    </style>
</head>
<body>
<!--搜索区域-->
<div class="search" >
    <div class="container">
        <div class="reservation">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <input type="text" class="form-control input-lg" id="name" placeholder="请输入餐厅名称">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <select id="country"  class="form-control input-lg">
                            <option value="null">请选择城市</option>
                            <option value="bj">北京</option>
                            <option value="sh">上海</option>
                            <option value="sz">深圳</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="searchbtn">
                        <button type="submit" class="btn btn-success btn-lg">
                            <img src="images/search-icon.png">&nbsp;搜索</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 搜索区域结束 -->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
